<template>
  <div class="music">
    <div class="titHead">
      <div class="tit">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-shuaxin"></use>
        </svg>
        <h3>推荐歌曲</h3>
      </div>
      <span class="more">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-24gf-play"></use>
        </svg>
        <p>播放</p>
      </span>
    </div>
    <div class="musicList">
      <van-swipe :loop="false" :width="350" :show-indicators="false">
        <van-swipe-item v-for="(n, index) in 4" :key="index">
          <div class="musicItem" v-for="inx in Math.floor(musicVal.length / 4)" :key="inx"
            @click="changeMusic(index * 3 + inx - 1)">
            <img :src="musicVal[index * 3 + inx - 1].picUrl" alt="" />
            <div class="tit">
              <p>
                {{ musicVal[index * 3 + inx - 1].name
                }}<span>-{{
    musicVal[index * 3 + inx - 1].song.artists[0].name
}}</span>
              </p>
              <span>1w+评论</span>
            </div>
            <div class="pay">
              <Svgview ion="#icon-24gf-play" />
            </div>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getMusicView, getPlaySongDetail } from "@/assets/axios/api";
import { useMusicStore } from "@/store/store.js";
import Svgview from "@/components/SvgView";
const musicStore = useMusicStore();
const musicVal = ref("");
const musicList = ref({});
onMounted(async () => {
  let res = await getMusicView();
  musicVal.value = res.data.result;
  let ids = musicVal.value.reduce((cur, old) => {
    return cur += old.id + ','
  }, '').slice(0, -1)
  let respond = await getPlaySongDetail(ids)
  musicList.value = respond.data.songs
});
const changeMusic = (idx) => {
  musicStore.changePlayList(musicList.value);
  musicStore.changePlayIndex(0, idx);
  musicStore.changePlayReady(true);
  musicStore.getMusicLyric();
  musicStore.changeFM(false)
  musicStore.changePlayPop(true)
};
</script>

<style scoped lang="less">
.music {
  margin-top: 10px;
  background-color: white;
  height: 240px;
  border-radius: 10px;
  padding-top: 15px;
  margin-bottom: 110px;

  .titHead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    margin-bottom: 10px;

    .tit {
      display: flex;
      flex-direction: row;
      align-items: center;
      height: 20px;
      line-height: 20px;
      margin-left: 10px;

      h3 {
        margin-left: 20px;
      }

      .icon {
        width: 20px;
        height: 20px;
      }
    }

    .more {
      font-size: 0.24rem;
      border-radius: 15px;
      border: 1px silver solid;
      padding: 0 8px;
      height: 20px;
      line-height: 20px;
      margin-right: 10px;
      display: flex;
      flex-direction: row;
      align-items: center;

      .icon {
        width: 10px;
        height: 10px;
        margin-right: 0;
      }
    }
  }

  .musicList {
    padding-left: 15px;

    .musicItem {
      padding: 5px 0;
      width: 100%;
      display: flex;
      justify-items: center;
      align-items: center;
      flex-direction: row;

      img {
        width: 50px;
        height: 50px;
        border-radius: 10px;
      }

      .tit {
        width: 500px;
        margin-left: 20px;

        p {
          margin-bottom: 10px;

          span {
            color: silver;
            font-size: 0.1rem;
          }
        }

        >span {
          font-size: 10px;
          color: orange;
          background-color: antiquewhite;
          padding: 5px;
          border-radius: 30px;
          font-weight: lighter;
        }
      }

      .pay {
        border-radius: 30px;
        height: 20px;
        width: 30px;
        border: 1px silver solid;
        margin-right: 20px;

        .icon {
          margin: 0 10px;
          width: 10px;
          height: 10px;
        }
      }
    }
  }
}
</style>
